import React from 'react';
import {
    Text,
    View,
    Button,
    Picker,
    AsyncStorage
} from 'react-native';
import { getMyTicks } from "../api"
import ModalPerson from "./ModalPerson"
import ModalRefund from "./ModalRefund"
import moment from 'moment';

import { NavigationEvents } from 'react-navigation';


class SettingsScreen extends React.Component {
    static navigationOptions = {
        title: '我的',
    };
    constructor(props) {
        super(props)
        this.state = {
            person: "",
            personModalShow: false,
            refundModalShow: false,
            persons: undefined,
            personList: [],
            ticks: [],
            refundCode: ""
        }
    }
    getPerson = async () => {
        try {
            let persons = await AsyncStorage.getItem("persons")
            let person = await AsyncStorage.getItem("person")
            if (persons) {
                persons = JSON.parse(persons)
                personList = []
                for (let key in persons) {
                    personList.push({
                        name: key,
                        phone: persons[key]["phone"],
                        idcard: persons[key]["idcard"]
                    })
                }
            }
            else {
                personList = []
            }

            this.setState({ personList, persons, person: person ? person : "" })

        }
        catch (e) {
            console.log(e)
        }
    }
    getMyTicks = async (idcard) => {
        let result = await getMyTicks(idcard)
        this.setState({
            ticks: result.data
        })
    }
    getData() {
        this.getPerson().then(() => {
            if (this.state.person) {
                this.getMyTicks(this.state.persons[this.state.person].idcard)
            }
            else {
                this.setState({
                    ticks: []
                })
            }
        })
    }
    componentDidMount() {
    }
    render() {
        return (
            <View style={{ justifyContent: 'flex-start', alignItems: 'center' }}>
                <NavigationEvents
                    onDidFocus={payload => {
                        this.getData()
                    }}
                />
                <ModalPerson show={this.state.personModalShow} userInfo={this.state.person ? { name: this.state.person, ...this.state.persons[this.state.person] } : undefined} close={() => {
                    this.setState({ personModalShow: false })
                    this.getPerson()
                }}></ModalPerson>
                <ModalRefund
                    show={this.state.refundModalShow}
                    code={this.state.refundCode}
                    close={() => {
                        this.setState({ refundModalShow: false })
                        this.getData()
                    }}></ModalRefund>
                <View style={{ flexDirection: "row", justifyContent: 'center', alignItems: 'center' }}>
                    <Text>人员</Text>
                    <Picker
                        selectedValue={this.state.person}
                        style={{ flex: 1 }}
                        onValueChange={(itemValue) => {
                            AsyncStorage.setItem("person", itemValue).then(() => {
                                this.getData()
                            })
                        }}>
                        <Picker.Item label="无" value="" />
                        {
                            this.state.personList.map(o =>
                                <Picker.Item key={o.name} label={o.name} value={o.name} />
                            )
                        }
                    </Picker>
                    {this.state.person ? <Button color="green"
                        onPress={() => this.setState({ personModalShow: true })}
                        title="编辑"
                    /> : undefined}
                    <Button
                        onPress={() => this.setState({ personModalShow: true })}
                        title="添加人员"
                    />
                </View >
                {
                    this.state.ticks.map(o => {
                        let orderTime = new Date(o[2])

                        let activityDate = new Date(o[4])

                        return (
                            <View style={{ padding: 12, flexDirection: "row", justifyContent: 'center', alignItems: 'center' }} key={o[0]}>
                                <View style={{ padding: 12, borderWidth: 1, borderColor: "black", borderStyle: "solid", flexDirection: "row", justifyContent: 'center', alignItems: 'center' }}>
                                    <View style={{ flex: 1 }}>
                                        <Text>凭证号：{o[0]}</Text>
                                        <Text>订票时间：{moment(orderTime).format("YYYY-MM-DD hh:mm")}</Text>
                                        <Text>活动时间：{moment(activityDate).format("YYYY-MM-DD dddd")} {o[5]}</Text>
                                    </View>
                                    <Button
                                        onPress={() => this.setState({
                                            refundModalShow: true,
                                            refundCode: o[0]
                                        })}
                                        title="退票"
                                    />
                                </View >
                            </View>
                        )
                    })
                }
            </View>
        );
    }
}

export default SettingsScreen